<template>
  <div id="taskList">
    <div class="profile">
      <!-- 用户的头像 -->
      <van-image
        round
        fit="cover"
        :src="items.users.img"
        class="img"
        @click="userInform(items.users.name)"
      />
      <!-- 用户的名称 -->
      <h3 class="name">
        {{items.users.name}}
        <!-- 用户的认证图标 -->
        <van-image v-if="items.users.student_identification" :src="require('../assets/book.png')" class="identifyImg" />
        <van-icon name="manager" v-if="items.users.people_identification" color="#00a8f3"/>
        <van-icon name="shop" v-if="items.users.shop_identification" color="#ff000a"/>
      </h3>
      <!-- 悬赏金额 -->
      <div class="money">{{money}}</div>
      <!-- 悬赏人信誉积分 -->
      <div class="credit">
        <van-rate v-model="credit" readonly allow-half void-icon="star" void-color="#eee" />
      </div>
      <!-- 任务的标题 -->
      <p class="title" v-if="items.title">{{items.title}}</p>
    </div>
    <!-- 悬赏内容 -->
    <div class="content">
      {{items.content}}
    </div>
    <div class="content">
      <van-image v-for="(i,index) in items.img" :key="index" :src="i" class="contentImg" />
    </div>
    <van-cell-group>
      <van-cell title="截止日期至" :value="items.effective_time" />
    </van-cell-group>
    <div class="details" @click="detailsClick">
      查看详情
    </div>
    <div class="long" v-if="items.long"><span style="color:black;">距离：</span>{{Number(items.long)}}米</div>
    <div v-else-if="items.long==0">个人订单</div>
    <div v-else class="long" style="color:black;">暂无地理位置信息</div>
  </div>
</template>

<script>
export default {
  name: 'TaskList',
  props: {
    items: {
      type: Object,
      default() {
        return {}
      }
    }
  },
  data () {
    return {
      credit: this.items.users.credit_score/2  
    }
  },
  computed: {
    money() {
      return this.items.money ?  "￥" + this.items.money : ""
    }
  },
  methods: {
    detailsClick() {
      this.$router.push({
        name: 'details',
        query:{
          id:this.items.id
        }
      })
      document.body.scrollTop = 0;
      document.documentElement.scrollTop = 0;
    },
    userInform(name){
      this.$router.push({path:'/user',query:{
        name:name
      }})
    }
  },
}
</script>

<style scoped>
  #taskList {
    float: left;
    width: 100%;
    border-top: 5px solid #9ad5a7;
    box-sizing: border-box;
    padding: 15px;
    overflow: hidden;
    border-radius:20px ;
  }
  .profile {
    float: left;
    width: 100%;
    padding-bottom: 10px;
  }
  .img {
    float: left;
    margin: 0 20px 0 0;
    border: 1px solid #cccccc;
    width: 60px;
    height: 60px
  }
  .name {
    float: left;
    padding: 0;
    margin: 5px 0;
    width: 170px;
    color: #494949;
    font-size: 17px;
  }
  .identifyImg {
    width: 18px;
    height: 18px
  }
  .credit {
    float: left;
    width: 170px;
    font-size: 12px;
  }
  .title {
    float: left;
    font-size: 23px;
    padding: 0;
    margin: 0;
    width: 220px;
    font-weight: 510;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .money {
    font-weight: 600;
    font-size: 20px;
    color: #ff000d;
    width: 100%;
  }
  .content {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    font-size: 15px;
  }
  .contentImg {
    width: 100px;
  }
  .details {
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: 800;
    letter-spacing: 2px;
    width: 90px;
    height: 40px;
    border-radius: 10px;
    float: right;
    margin: 15px 5px 5px;
    color: #ffffff;
    background: #9ad5a7;
  }
  .long{
    padding: 20px  0  0 5%;
    font-size: larger;
    color: red;
  }
</style>